
<template>
    <div>
      <div v-if="fieldList.length > 0" >
        <happy-scroll :size="10" resize>
          <div style="padding-right: 10px;display:inline-table">
            <div style="display:flex;white-space:nowrap;">
              <div style="padding:10px;border:1px solid #dcdee2;width: 100%;min-width:180px;
              word-break: break-all;white-space:normal;display:inline-grid"
              v-for="(item, i) in fieldList" :key="i">
              <div style="height:100%">
                <div>
                  <b>{{item.title}}</b>
                  <span class="tips">{{item.key}}</span>
                </div>
                <!-- 操作 -->
                <div class="tips" style="margin-top:10px;text-align:right">
                    <a @click="thEdit(item, i, 'l')" :style="{pointerEvents: disBtn ? 'none' : 'all', color: disBtn ? '#c5c8ce' : ''}">
                        <Icon type="md-arrow-back" />
                    </a>
                    <Divider type="vertical" />
                    <a @click="thEdit(item, i, 'r')" :style="{pointerEvents: disBtn ? 'none' : 'all', color: disBtn ? '#c5c8ce' : ''}">
                        <Icon type="md-arrow-forward" />
                    </a>
                    <Divider type="vertical" />
                    <a @click="thEdit(item, i, 'hide')" :style="{pointerEvents: disBtn ? 'none' : 'all', color: disBtn ? '#c5c8ce' : ''}">
                      <Icon type="md-eye" v-if="!item.hide"/>
                      <Icon type="md-eye-off" v-else/>
                    </a>
                    <Divider type="vertical" />
                    <a @click="thEdit(item, i, 'remove')">
                      <Icon type="md-trash" />
                    </a>
                </div>
                <div class="tips" style="margin-top:10px;text-align:right">
                    <a @click="thEdit(item, i, 'nf')"  v-if="item.fixed" :style="{pointerEvents: disBtn ? 'none' : 'all', color: disBtn ? '#c5c8ce' : ''}">取消</a>
                    <Divider type="vertical"  v-if="item.fixed"/>
                    <a @click="thEdit(item, i, 'lf')" :style="{pointerEvents: disBtn ? 'none' : 'all', color: disBtn ? '#c5c8ce' : ''}">左固定</a>
                    <Divider type="vertical" />
                    <a @click="thEdit(item, i, 'rf')" :style="{pointerEvents: disBtn ? 'none' : 'all', color: disBtn ? '#c5c8ce' : ''}">右固定</a>
                </div>
                <div class="tips" style="margin-top:10px;text-align:right">
                  <a @click="editTHFieldConfig(item)">编辑配置</a>
                </div>
              </div>
              </div>
              <div style="padding:10px;border:1px solid #dcdee2;width: 100%;min-width:180px;
              word-break: break-all;white-space:normal;display:inline-grid;align-items: center;">
                <Tooltip content="新建表头字段" style="text-align:center" placement="top">
                  <Icon type="md-add" :size="32" style="cursor: pointer;" @click="createField"></Icon>
                </Tooltip>
              </div>
            </div>
          </div>
        </happy-scroll>
      </div>
      <div v-else style="padding:50px 0">
        <empty msg="暂未解析到表头"/>
      </div>
      <!-- modal -->
      <Modal v-model="thField.flag" title="字段配置" draggable footer-hide>
        <div v-if="thField.item">
          <Form :model="thField.item" label-position="top">
            <FormItem label="表头显示文字[title]">
                <Input v-model="thField.item.title"></Input>
                <div class="tips"></div>
            </FormItem>
            <FormItem label="对应列内容的字段名[key]">
                <Input v-model="thField.item.key" :disabled="thField.type !== 'add'"></Input>
                <div class="tips">设置slot后本列将不设置单元格内容</div>
            </FormItem>
            <FormItem label="重定义列内容实现标识[slot]">
                <Input v-model="thField.item.slot"></Input>
            </FormItem>
            <FormItem label="slot具体实现" v-if="thField.item.slot">
              <div class="tips">PS: row.当前表格行对象 示例: row.name ==> 当前行对象的name字段
                <Poptip trigger="hover" title="slot示例代码">
                  <a>查看示例</a>
                  <div slot="content">
                    {{"&lt;div&gt;"}}
                    {{"{ { row.name } }"}}
                    {{"&lt;/div&gt;"}}
                    </pre>
                  </div>
                </Poptip>
              </div>
              <!-- <Input type="textarea" :rows="3" v-model="slotConfig[thField.item.slot]"/> -->
              <CodeEdit ref="codeedit" :code="slotConfig[thField.item.slot]" :codekey="thField.item.slot"/>
            </FormItem>
            <FormItem label="列类型[type]">
              <Select v-model="thField.item.type" style="width:100%">
                <Option value="index">序号</Option>
                <Option value="String">字符串</Option>
                <Option value="html">HTML字符串</Option>
              </Select>
            </FormItem>
            <FormItem label="对齐方向[align]">
              <Select v-model="thField.item.align" style="width:100%">
                <Option value="left">靠左</Option>
                <Option value="center">居中</Option>
                <Option value="right">靠右</Option>
              </Select>
            </FormItem>
            <FormItem label="是否省略内容[tooltip]">
              <SwitchIview v-model="thField.item.tooltip"/>
            </FormItem>
          </Form>
          <div v-if="thField.type === 'add'" style="text-align:right">
            <Button @click="thField.flag = false">取消</Button>
            <Button type="primary" @click="createFieldSave">确认添加</Button>
          </div>
          <div v-else style="text-align:right">
            <Button type="primary" @click="changeDataSave">确认</Button>
          </div>
        </div>
        <div v-else style="padding:50px 0">
          <empty msg="暂未选择字段"/>
        </div>
      </Modal>
    </div>
</template>
<script>
import CodeEdit from '../form_component/CodeEdit.vue'
export default {
  name: 'FieldTableAttr',
  data () {
    return {
      fieldList: this.fields,
      disBtn: this.dis,
      // 表头字段配置
      thField: {
        flag: false,
        type: 'edit',
        item: undefined
      },
      // slot配置项
      slotConfig: this.slotAttr
    }
  },
  props: {
    fields: [],
    dis: false,
    slotAttr: {}
  },
  watch: {
    'fields': {
      handler: function (e) {
        this.fieldList = e || []
      }
    },
    'slotAttr': {
      handler: function (e) {
        this.slotConfig = e || {}
      }
    },
    'dis': {
      handler: function (e) {
        this.disBtn = e
      }
    }
  },
  components: {
    CodeEdit: CodeEdit
  },
  methods: {
    thEdit (item, i, type) {
      if ((i === 0 && type === 'l') || (i === (this.fieldList.length - 1) && type === 'r')) {
        return
      }
      let before = this.lseutil.objCopy(item)
      switch (type) {
        case 'l':
          this.fieldList[i] = this.lseutil.objCopy(this.fieldList[i - 1])
          this.fieldList[i - 1] = before
          break
        case 'r':
          this.fieldList[i] = this.lseutil.objCopy(this.fieldList[i + 1])
          this.fieldList[i + 1] = before
          break
        case 'hide':
          item.hide = !item.hide
          break
        case 'nf':
          delete item.fixed
          break
        case 'lf':
          item.fixed = 'left'
          break
        case 'rf':
          item.fixed = 'right'
          break
        case 'remove':
          this.fieldList.splice(i, 1)
          break
        default:
          break
      }
      this.$emit('thChange', this.fieldList, this.slotConfig)
      // console.log(item)
      this.$forceUpdate()
    },
    editTHFieldConfig (item) {
      this.thField.item = item
      this.thField.type = 'edit'
      this.thField.flag = true
    },
    createField () {
      this.thField.item = this.lseutil.objCopy({
        title: '',
        key: '',
        slot: '',
        type: 'String',
        align: 'left',
        tooltip: true
      })
      this.thField.flag = true
      this.thField.type = 'add'
    },
    createFieldSave () {
      let item = this.thField.item
      if (!item.title) {
        this.lseutil.msg({
          msg: '请填写表头名称',
          type: 2
        })
        return
      }
      if (!item.key && !item.slot) {
        this.lseutil.msg({
          msg: '必须指定key或slot中的一个',
          type: 2
        })
        return
      }
      this.fieldList.push(item)
      this.$emit('thChange', this.fieldList, this.slotConfig)
      this.thField.flag = false
    },
    changeDataSave () {
      let edit = this.$refs.codeedit
      this.slotConfig[edit.codekey] = edit.str
      this.$emit('thChange', this.fieldList, this.slotConfig)
      this.thField.flag = false
    }
  },
  mounted () {},
  created () {
  }
}
</script>
<style scoped>
</style>
